<template>
  <div class="per-box">
    <div v-if="islogbol" class="per_persion">
      <div class="header">
        <img @click="myData" src="../../../assets/img/siting.png" alt="">
      </div>
      <div class="per_thumb">
        <div class="per_tou">
          <img :src="userInfo.avatar" alt="">
          <div v-if="userInfo.is_auth==0?false:true" class="xiabiao real real_box  real_box1">
            <img src="../../../assets/img/real.png" alt="">
          </div>
        </div>
        <p class="p_tit">{{userInfo.user_login}}</p>
        <p class="per_jian">{{userInfo.signature}}</p>
      </div>
    </div>

    <div v-else class="container p_t40 p_d40 flex f_align f_bet w1 b_d" @click="regis()">
      <span class="pls">请先登录</span>
      <div>
        <img
          src="../../../assets/img/more.png"
          alt=""
          class="more"
        >
      </div>
    </div>

    <div class="border_bot">
      <ul class="se_ul">
        <li @click="second(item)" v-for="(item,index) in secondData" :key="index">
          <img :src="item.tu" alt="">
          <p>{{item.txt}}</p>
        </li>
      </ul>
    </div>

    <div
      v-for="(item,index) in navList"
      :key="index"
      class="list_box"
    >
      <div
        class="container p_t40 p_d40 flex f_align f_bet w1"
        @click="nextTo(item.listTapUrl)"
      >
        <div class="flex">
          <div class="img_box m_r30">
            <img
              :src="item.listImg"
              alt=""
              :class="item.listName"
            >
          </div>
          <div class="font_28 c_28">
            <span>{{item.listTxt}}</span>
          </div>
        </div>
        <div>
          <img
            src="../../../assets/img/more.png"
            alt=""
            class="more"
          >
        </div>
      </div>
    </div>
    <div v-if="islogbol" class="sub-btn t_center font_36 c_ff">
      <span @click="exits()">退出</span>
    </div>

    <Footer></Footer>
  </div>
</template>
<script>
  import Footer from '../../com/Footer'
  import * as common from "../../../api/common.js";
export default {
  data() {
    return {
      islogbol:false,
      userInfo: {
        avatar: '',
        user_login: "'",
        signature: "",
        is_auth:''
      },
      secondData:[
        {tu:require("../../../assets/img/history.png"),txt:'历史',path:'/historyv'},
        {tu:require("../../../assets/img/dlone.png"),txt:'下载',path:'/dlone'},
        {tu:require("../../../assets/img/loke.png"),txt:'关注',path:'/loke'},
        {tu:require("../../../assets/img/fensi.png"),txt:'粉丝',path:'/fensi'},
        {tu:require("../../../assets/img/shoucang.png"),txt:'收藏',path:'/shoucang'},
      ],
      navList: [
        {
          listTxt: "消息中心",
          listImg: require("../../../assets/img/message.png"),
          listName: "idea",
          listTapUrl: "/myMessage"
        },
        {
          listTxt: "活动管理",
          listImg: require("../../../assets/img/sanren.png"),
          listName: "dynamic",
          listTapUrl: "/houdong"
        },
        {
          listTxt: "认证管理",
          listImg: require("../../../assets/img/real_list.png"),
          listName: "idea",
          listTapUrl: "/myRealRadio"
        },
        // {
        //   listTxt: "发布动态",
        //   listImg: require("../../../assets/img/dynamic.png"),
        //   listName: "dynamic",
        //   listTapUrl: "/myPublishDynamic"
        // },
        {
          listTxt: "意见反馈",
          listImg: require("../../../assets/img/idea.png"),
          listName: "idea",
          listTapUrl: "/myidea"
        },
        {
          listTxt: "版本信息",
          listImg: require("../../../assets/img/versions.png"),
          listName: "versions",
          listTapUrl: "/myVersions"
        },
        {
          listTxt: "关于我们",
          listImg: require("../../../assets/img/about.png"),
          listName: "about",
          listTapUrl: "/myAbout"
        }
      ]
    };
  },
  beforeMount(){
    let useid = {user_id:this.$store.state.user_id};
    common.userinfo(useid).then(res=>{
      this.userInfo.avatar = res.data.avatar;
      this.userInfo.user_login = res.data.user_login;
      this.userInfo.signature = res.data.signature;
      this.userInfo.is_auth = res.data.is_auth;
    })
  },
  mounted(){
    if (this.usid.length==0){
      this.islogbol = false;
    } else{
      this.islogbol = true;
    }

    // //首页返回键处理
    // //处理逻辑：1秒内，连续两次按返回键，则退出应用；
    // var first = null;
    // mui.back = function() {
    //   //首次按键，提示  再按一次退出应用
    //   if (!first) {
    //     first = new Date().getTime();//记录第一次按下回退键的时间
    //     mui.toast('再按一次退出应用');//给出提示
    //     history.go(-1)//回退到上一页面
    //     setTimeout(function() {//1s中后清除
    //       first = null;
    //     }, 1000);
    //   } else {
    //     if (new Date().getTime() - first < 1000) {//如果两次按下的时间小于1s，
    //       plus.runtime.quit();//那么就退出app
    //
    //     } } };
  },
  computed:{
    usid(){
      return this.$store.state.user_id;
    }
  },
  components:{
    Footer
  },
  methods: {
    myData() {
      this.$router.push({ path: "/myData" });
    },
    nextTo(url) {
      if (this.$store.state.user_id){
        this.$router.push({ path: url });
      } else{
        this.$router.push({path:'/register'})
      }
    },
    regis(){
      this.$router.push({ path: "/register" });
    },
    exits(){
      this.$store.commit('chage','');
      this.islogbol = false;
    },
    second(item){
      this.$router.push({path:item.path})
    }
  }
};
</script>
<style scoped>
  .per-box{
    padding-bottom: 114px;
  }
  .per_persion{
    position: relative;
    text-align: center;
    background: url("../../../assets/img/beijing.png") no-repeat center/cover;
  }
  .per_persion .header{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 40px 0;
    text-align: right;
  }
  .per_persion .header img{
    width: 40px;
    height: 40px;
  }
  .per_persion .per_thumb{
    padding: 75px 0 40px;
  }
  .per_persion .per_thumb .per_tou{
    position: relative;
  }
  .per_persion .per_thumb .per_tou .xiabiao{
    position: absolute;
    left: 55%;
    top: 55%;
  }
  .per_persion .per_thumb .per_tou>img{
    width: 164px;
    height: 164px;
    border: 5px solid #fff;
    border-radius: 50%;
  }
  .per_persion .per_thumb .p_tit{
    font-size: 45px;
    font-weight: bolder;
    padding: 15px 0 30px;
  }
  .per_persion .per_thumb .per_jian{
    font-size: 32px;
    color: #404040;
  }

  .pls{
    font-size: 36px;
  }
  /*.per-box{*/
    /*padding-bottom: 200px;*/
  /*}*/
.headImg_box {
  width: 140px;
  max-width: 140px;
  height: 140px;
  position: relative;
}
.headImg_box img.avatar {
  width: 140px;
  max-width: 140px;
  height: 140px;
  border-radius: 50%;
}
.real {
  position: absolute;
  right: -4px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  z-index: 2;
  border-radius: 50%;
  text-align: center;
}
.real_box {
  background: #8c8c8c;
}
.real_box1 {
  background: #ffc240;
}

.real img {
  width: 22px;
  height: 20px;
}
.list_box > div {
  border-bottom: 2px solid #cdcdcd;
}

.img_box {
  width: 50px;
}
.dynamic {
  width: 40px;
  height: 40px;
}
.active {
  width: 40px;
  height: 38px;
}
.real_list {
  width: 34px;
  height: 40px;
}
.message {
  width: 38px;
  height: 35px;
}
.idea {
  width: 36px;
  height: 36px;
}
.versions {
  width: 40px;
  height: 40px;
}
.about {
  width: 40px;
  height: 40px;
}
.sub-btn {
  width: 400px;
  height: 80px;
  line-height: 80px;
  margin:50px auto 0;
  background: #884ca4;
  border-radius: 10px;
}
.sub-btn span{
  color: #fff;
}

  /*.biao{*/
    /*padding: 7px 10px;*/
    /*font-size: 18px;*/
    /*color: #884ca4;*/
    /*border: 2px solid #884ca4;*/
    /*border-radius: 10px;*/
  /*}*/
.border_bot{
  border-bottom: 10px solid #eaeaea;
}
  .se_ul{
    border: 2px solid #f4f3f3;
    border-radius: 17px;
    box-shadow: 0 0 15px;
    margin: 40px 30px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
  }
  .se_ul li{
    text-align: center;
  }
  .se_ul li img{
    width: 60px;
    height: 60px;
  }
  .se_ul li p{
    font-size: 24px;
    color: #666666;
  }
</style>

